import { useContext, useEffect, useState } from 'react';
import { useMediaPredicate } from 'react-media-hook';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from 'src/redux/store';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import Pagination from 'src/component/Pagination';
import DateFilter from 'src/component/RoundDateFilter';
import RoundSelect from 'src/component/RoundSelect';
import SelectOption from 'src/component/SelectOption';
import SortingSelect from 'src/component/SortingSelect';
import { MediaQuery } from 'src/constant/Media';
import { ThemeContext } from 'src/context/ThemeContext';
import { useDateFilter } from 'src/hook/useDateFilter';
import { usePagination } from 'src/hook/usePagination';
// import { Fill } from 'src/model/Order';
import { openSnackbar } from 'src/redux/uiSlice';
import { getMyOrder } from 'src/service/orderService';
import OrderAllCard from './component/OrderAllCard';
import OrderAllTable from './component/OrderAllTable';
import style from './OrderAll.module.scss';

type Fill = any


const OrderAll = () => {
    const dispatch = useDispatch();
    const { offset, limit, setCount, paginationProps } = usePagination();
    const { begin, end, dateFilterProps } = useDateFilter();
    const [filterStatus, setFilterStatus] = useState<string>('全部');
    const [filterSorting, setFilterSorting] = useState<string>('default');
    const [fills, setFills] = useState<Fill[]>([]);
    const [allDatas, setAllDatas] = useState<Fill[]>([]);
    const [refresh, setRefresh] = useState<boolean>(false);
    const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
    const { IcEmpty } = useContext(ThemeContext).image;
    const token = localStorage.getItem("token")
    const { accountInfo } = useSelector((rootState: RootState) => rootState.auth);
    useEffect(() => {
        if (!accountInfo?.FID) return
        getMyOrder({
            FUserID: accountInfo?.FID,
            FState: filterStatus,
            Sdate: begin,
            Edate: end,
            token: token,
        }).then(res => {
            if (res.success) {
                setAllDatas(res.list);
                setCount(res.list.length);
            }
        })
    }, [refresh, filterStatus, filterSorting, begin, end, limit, accountInfo]);

    useEffect(() => {
        if (allDatas.length < 0) return
        let len = offset + limit
        let data = allDatas.slice(offset, len)
        setFills(data);
    }, [offset, limit, allDatas])
    const onStatusFilterChange = (value: string) => {
        paginationProps.setPage(1);
        setFilterStatus(value);
    };

    const onSortingFilterChange = (value: string) => {
        paginationProps.setPage(1);
        setFilterSorting(value);
    };


    return (
        <div>
            <div className={style.backButton}>
                <BackButton />
            </div>
            <div className={style.heading}>全部订单</div>

            <div className={style.headingBlock}>
                <div className={style.buttons}>
                    <Button
                        appearance="outlined"
                        className={style.logout}
                        onClick={() => setRefresh(!refresh)}
                    >
                        重新整理
                    </Button>
                </div>
            </div>
            {fills && (
                <>
                    <div className={style.orderBlock}>
                        <div className={style.filterBlock}>
                            <div className={style.filterBlockLeft}>
                                <DateFilter onChange={() => paginationProps.setPage(1)} {...dateFilterProps} />
                                <div className={style.statusFilter}>
                                    <RoundSelect
                                        label="状态"
                                        defaultValue="全部"
                                        onChange={onStatusFilterChange}
                                    >
                                        <SelectOption value="全部">全部</SelectOption>
                                        <SelectOption value="待收款">
                                            待收款
                                        </SelectOption>
                                        <SelectOption value="已付款待确认">
                                            已付款待确认
                                        </SelectOption>
                                        <SelectOption value="已查收放币">
                                            已查收放币
                                        </SelectOption>
                                        <SelectOption value="canceled">
                                            已取消
                                        </SelectOption>
                                    </RoundSelect>
                                </div>
                            </div>
                            <div className={style.sortingFilter}>
                                <SortingSelect defaultValue="default" onChange={onSortingFilterChange}>
                                    <SelectOption value="default">
                                        时间：新 {">"} 旧
                                    </SelectOption>
                                    <SelectOption value="-price">
                                        价格：高 {">"} 低
                                    </SelectOption>
                                    <SelectOption value="price">
                                        价格：低 {">"} 高
                                    </SelectOption>
                                    <SelectOption value="-amount">
                                        数量：大 {">"} 小
                                    </SelectOption>
                                    <SelectOption value="amount">
                                        数量：小 {">"} 大
                                    </SelectOption>
                                    <SelectOption value="-total">
                                        收款金额：高 {">"} 低
                                    </SelectOption>
                                    <SelectOption value="total">
                                        收款金额：低 {">"} 高
                                    </SelectOption>
                                </SortingSelect>
                            </div>
                        </div>
                        <div className={style.divider} />
                        {fills.length === 0 && (
                            <div className={style.emptyImg}>
                                <img src={IcEmpty} />
                            </div>
                        )}
                        {fills.length > 0 &&
                            (isBiggerThanMd ? <OrderAllTable data={fills} /> : <OrderAllCard data={fills} />)}
                    </div>
                    <div className={style.pagination}>
                        <Pagination {...paginationProps} />
                    </div>
                </>
            )}
        </div>
    );
};

export default OrderAll;
